<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>webgpu-samples: multipleCanvases</title>
  <style>
    :root {
      color-scheme: light dark;
    }

    html,
    body {
      margin: 0;
      /* remove default margin */
      height: 100%;
      /* make body fill the browser window */
    }

    #outere {
      width: 100%;
      height: 100%;
      display: block;
      overflow: auto;
    }

    .product {
      display: inline-block;
      padding: 1em;
      background: #888;
      margin: 1em;
    }

    .size0>canvas {
      width: 200px;
      height: 200px;
    }

    .size1>canvas {
      width: 250px;
      height: 200px;
    }

    .size2>canvas {
      width: 300px;
      height: 200px;
    }

    .size3>canvas {
      width: 100px;
      height: 200px;
    }
  </style>
  <script defer src="./index.ts" type="module"></script>
</head>

<body>
  <p id="description" style="width: 600px;">
    This example shows rendering to multiple canvases with a single WebGPU device and using \`IntersectionObserver\`
    to only render to visible canvases.

    For more info [see this article](https://webgpufundamentals.org/webgpu/lessons/webgpu-multiple-canvases.html).
  </p>
  <div id="outer"></div>
</body>

</html>